<template>
  <div class="user-management">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>用户管理</span>
          <el-button type="primary" @click="handleAdd">添加用户</el-button>
        </div>
      </template>
      
      <!-- 搜索区域 -->
      <div class="search-area">
        <el-form :inline="true" :model="searchForm" class="demo-form-inline">
          <el-form-item label="用户名">
            <el-input v-model="searchForm.username" placeholder="请输入用户名" clearable></el-input>
          </el-form-item>
          
          <el-form-item label="姓名">
            <el-input v-model="searchForm.realname" placeholder="请输入姓名" clearable></el-input>
          </el-form-item>

          <el-form-item label="身份证号">
            <el-input v-model="searchForm.idCard" placeholder="请输入身份证号" clearable></el-input>
          </el-form-item>

          <el-form-item label="手机号">
            <el-input v-model="searchForm.phone" placeholder="请输入手机号" clearable></el-input>
          </el-form-item>
          
          <el-form-item label="状态">
            <el-select v-model="searchForm.state" placeholder="请选择状态" clearable>
              <el-option label="全部" value=""></el-option>
              <el-option label="正常" value="1"></el-option>
              <el-option label="已注销" value="0"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSearch">查询</el-button>
            <el-button @click="resetSearch">重置</el-button>
          </el-form-item>
        </el-form>
      </div>

      <!-- 表格区域 -->
      <el-table :data="userList" style="width: 100%" border height="calc(100vh - 350px)">
        <el-table-column type="index" label="序号" width="60">
          <template #default="scope">
            {{ scope.$index + 1 + (currentPage - 1) * pageSize }}
          </template>
        </el-table-column>
        <el-table-column prop="username" label="用户名" width="100"></el-table-column>
        <el-table-column prop="realname" label="姓名" width="100"></el-table-column>
        <el-table-column prop="idCard" label="身份证号" width="200"></el-table-column>
        <el-table-column prop="phone" label="手机号" width="140"></el-table-column>
        <el-table-column prop="stats" label="状态" width="100">
          <template #default="scope">
            <el-tag :type="scope.row.state == '1' ? 'success' : 'danger'">
              {{ scope.row.state == '1' ? '正常' : '已注销' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间">
          <template #default="scope">
            <el-date-picker
              v-model="scope.row.createTime"
              type="datetime"
              format="YYYY-MM-DD HH:mm:ss"
              value-format="YYYY-MM-DD HH:mm:ss"
              readonly
            />
          </template>
        </el-table-column>
        <el-table-column prop="updateTime" label="最后修改时间">
          <template #default="scope">
            <el-date-picker
              v-model="scope.row.updateTime"
              type="datetime"
              format="YYYY-MM-DD HH:mm:ss"
              value-format="YYYY-MM-DD HH:mm:ss"
              readonly
            />
          </template>
        </el-table-column>
        <el-table-column label="操作" width="250">
          <template #default="scope">
            <el-button size="small" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button size="small" type="success" @click="handleResetPassword(scope.row)">重置密码</el-button>
            <el-button 
              size="small" 
              type="danger" 
              @click="handleDelete(scope.row)"
              :disabled="scope.row.status === '0'"
            >
              注销
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>

    <!-- 添加/编辑用户对话框 -->
    <el-dialog
      :title="dialogTitle"
      v-model="dialogVisible"
      width="500px"
    >
      <el-form :model="userForm" :rules="rules" ref="userFormRef" label-width="80px">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="userForm.username"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="userForm.email"></el-input>
        </el-form-item>
        <el-form-item label="电话" prop="phone">
          <el-input v-model="userForm.phone"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitForm">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { ElMessage, ElMessageBox } from 'element-plus'
export default {
  name: 'UserManagement',
  data() {
    return {
      // 搜索表单
      searchForm: {
        username: '',
        realname: '',
        idCard: '',
        phone: '',
        status: ''
      },
      // 用户列表数据
      userList: [],
      // 分页相关
      currentPage: 1,
      pageSize: 20,
      total: 100,
      // 对话框相关
      dialogVisible: false,
      dialogTitle: '添加用户',
      userForm: {
        username: '',
        email: '',
        phone: ''
      },
      // 表单验证规则
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入电话', trigger: 'blur' },
          { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
        ]
      }
    }
  },
  created(){
    this.handleSearch()
  },
  methods: {
    // 搜索方法
    handleSearch() {

      let data = {
        data : this.searchForm,
        pageNum : this.currentPage,
        pageSize : this.pageSize
      }

      this.$post('/getUserListByUser',data).then(res=>{ 
        if(res.code==200){
          this.userList=res.data
          this.total=res.total
        }else{
          this.$message.error(res.msg)
        }
      }).catch(err =>{
        // this.$message.error('服务器出错了~~')
        console.log(err)
      })
    },
    // 重置搜索
    resetSearch() {
      this.searchForm.username = ''
      this.searchForm.realname = ''
      this.searchForm.idCard = ''
      this.searchForm.phone = ''
      this.searchForm.status = ''
      this.handleSearch()
    },
    // 添加用户
    handleAdd() {
      this.dialogTitle = '添加用户'
      this.dialogVisible = true
      this.userForm = {
        username: '',
        email: '',
        phone: ''
      }
    },
    // 编辑用户
    handleEdit(row) {
      this.dialogTitle = '编辑用户'
      this.dialogVisible = true
      this.userForm = { ...row }
    },
    // 提交表单
    submitForm() {
      this.$refs.userFormRef.validate((valid) => {
        if (valid) {
          // TODO: 实现添加/编辑逻辑
          console.log('提交表单：', this.userForm)
          this.dialogVisible = false
          ElMessage.success('操作成功')
        }
      })
    },
    // 注销用户
    handleDelete(row) {
      ElMessageBox.confirm(
        '确定要注销该用户吗？',
        '警告',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
      ).then(() => {
        // TODO: 实现注销逻辑
        console.log('注销用户：', row)
        ElMessage.success('注销成功')
      })
    },
    // 分页方法
    handleSizeChange(val) {
      this.pageSize = val
      this.handleSearch()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.handleSearch()
    }
  }
}
</script>

<style scoped>
.user-management {
  padding: 10px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.search-area {
  margin-bottom: 20px;
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
</style>
